<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试工具</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; }
        input, button { padding: 10px; margin: 5px; font-size: 16px; }
        #result { margin-top: 20px; padding: 10px; background: #f5f5f5; white-space: pre-wrap; }
        button { background: #007bff; color: white; border: none; cursor: pointer; }
        button:hover { background: #0056b3; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Alibaba DeepSeek API 测试工具</h1>
        
        <input type="text" id="question" placeholder="输入你的问题..." style="width: 300px">
        <button onclick="testChat()">发送</button>
        
        <h3>快捷测试：</h3>
        <button onclick="quickTest('你是谁')">你是谁</button>
        <button onclick="quickTest('今天天气怎么样')">天气</button>
        <button onclick="quickTest('写首关于春天的诗')">写诗</button>
        <button onclick="quickTest('What is Java')">Java是什么</button>
        
        <div id="result"></div>
    </div>

    <script>
        function testChat() {
            const question = document.getElementById('question').value;
            if (!question) return;
            
            document.getElementById('result').innerHTML = '加载中...';
            
            fetch(`/ai/chat?input=${encodeURIComponent(question)}`)
                .then(response => response.text())
                .then(data => {
                    document.getElementById('result').innerHTML = `问题：${question}\n\n回答：${data}`;
                })
                .catch(error => {
                    document.getElementById('result').innerHTML = `错误：${error.message}`;
                });
        }
        
        function quickTest(question) {
            document.getElementById('question').value = question;
            testChat();
        }
    </script>
</body>
</html>
